<template>
	<view class="content">
		<view class="hsort" style="background: #F3F6F8;">
			<!-- <view class="hsort_inner">
				<picker @change="bindChangeArea" :value="areaIndex" :range="areaArray" :range-key="'areaName'">
					<div style="display: flex;align-items: center;">
						<view class="uni-input" style="font-size: 36rpx;">{{areaArray[areaIndex].areaName}}</view>
						<image class="hsort_inner_icon" src="../../static/img/jiantou1.png" mode=""></image>
					</div>
				</picker>
			</view> -->
			<div class="search_box">
				<input class="search_input" type="text" value="" v-model="post" placeholder="请输入职位"/>
				<div style="display: flex;align-items: center;margin-bottom: 10rpx;">
					<span class="search_btn" :class="{ 'selected_btn': index1 == 0 }" @click="getList1(0)">全部</span>
					<span class="search_btn" :class="{ 'selected_btn': index1 == 2 }" @click="getList1(2)">求职</span>
					<span class="search_btn" :class="{ 'selected_btn': index1 == 1 }" @click="getList1(1)">招聘</span>
				</div>
			</div>
		</view>
		<view style="margin-top: 80rpx;">
			<!-- 招聘标签 -->
			<view class="tag_list" v-if="index1 == 1">
				<text class="tag_inner" :class="{ 'selected': highlights == '' }" @tap="getTag('')">不限</text>
				<text class="tag_inner" :class="{ 'selected': highlights == item.dictLabel }" @tap="getTag(item)" v-for="(item,index) in tagList1" :key="index">{{item.dictLabel}}</text>
			</view>
			<!-- 求职标签 -->
			<view class="tag_list" v-if="index1 == 2">
				<text class="tag_inner" :class="{ 'selected': highlights == '' }" @tap="getTag('')">不限</text>
				<text class="tag_inner" :class="{ 'selected': highlights == item.dictLabel }" @tap="getTag(item)" v-for="(item,index) in tagList" :key="index">{{item.dictLabel}}</text>
			</view>
		</view>
		<view :class="{'add_padding':index1 != 0}">
			<view v-for="(item,index) in list" :key="index" style="padding-top: 25rpx;">
				<!-- 招聘 -->
				<view class="q_list" @tap="toDetail(item.id)" v-if="item.type == 0">
					<view class="q_list_content">
						<view class="q_user">
							<view class="q_user_inner">
								<view class="q_name">{{item.contents}}</view>
								<view class="q_top" v-if="String(item.stick) === '0'">置顶</view>
							</view>
							<view class="q_type">招聘</view>
						</view>
						<view class="q_tag" v-if="item.highlights">
							<view v-for="(tagItem,index2) in item.highlights.split(',')" :key="index2" class="q_tag_inner">{{tagItem}}</view>
						</view>
						<view class="q_content">
							<!-- <view class="q_inner">{{item.contents}}</view> -->
							<view class="q_link">岗位：<text style="color: #222222">{{item.post}}</text></view>
							<view class="q_link">薪资：<text style="color: #222222">{{(item.salary == "undefined" || item.salary == null || item.salary == '') ? '面谈' : item.salary + ' 元/月'}}</text></view>
							<view class="q_img_box" v-if="item.img">
								<image class="q_img" v-for="(imgItem,index3) in item.img.split(',')" :src="imgItem" @tap.stop="clickImg(item.img,index3)" mode=""></image>
							</view>
							<view class="p_bottom">
								<view class="p_time">{{item.updateTime || item.addTime}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 求职 -->
				<view class="q_list" @tap="toDetail(item.id)" v-if="item.type == 1">
					<view class="q_list_content">
						<view class="q_user">
							<view class="q_user_inner">
								<view class="q_name">{{item.contents}}</view>
								<view class="q_top" v-if="String(item.stick) === '0'">置顶</view>
							</view>
							<view class="q_type qiuzhi">求职</view>
						</view>
						<view class="q_tag" v-if="item.highlights">
							<view v-for="(tagItem,index2) in item.highlights.split(',')" :key="index2" class="q_tag_inner">{{tagItem}}</view>
						</view>
						<view class="q_content">
							<!-- <view class="q_inner">{{item.contents}}</view> -->
							<view class="q_link">岗位：<text style="color: #222222">{{item.post}}</text></view>
							<view class="q_link" v-if="">薪资：<text style="color: #222222">{{(item.salary == "undefined" || item.salary == null || item.salary == '') ? '面谈' : item.salary + ' 元/月' }}</text></view>
							<view class="q_img_box" v-if="item.img">
								<image class="q_img" v-for="(imgItem,index3) in item.img.split(',')" :src="imgItem" @tap.stop="clickImg(item.img,index3)" mode=""></image>
							</view>
							<view class="p_bottom">
								<view class="p_time">{{item.updateTime || item.addTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 弹框 -->
		<view class="posters" v-if="isShow">
			<view class="posters_layer">
				<view class="canvas-box">
					<view class="canvas-inner">
						<view class="link_title">联系方式</view>
						<view class="q_link">电话：
							<text style="color: #222222" v-if="linkForm.mobile" >{{linkForm.mobile}}</text>
							<view class="link_inner_btn" @tap="takePhone(linkForm.mobile)">拨打电话</view>
						</view>
						<view class="q_link">微信：
							<text style="color: #222222" v-if="linkForm.customerWechat">{{linkForm.customerWechat}}</text>
							<view class="link_inner_btn" @tap="copyBtn(linkForm.customerWechat)">点击复制</view>
						</view>
						<button type="primary" class="link_btn" @tap="isShow = false">确 定</button>
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	var _self,timer = null;
	export default {
		data() {
			return {
				areaIndex: 0,
				areaArray: [],
				orderArray1: ['招聘求职','招聘','求职'],
				index1: 0,
				list: [],
				tagList: [],
				tagList1: [],
				isShow: false,
				linkForm: {},
				pageNum: 1,
				pageSize: 10,
				nodata: false,
				post: '',
				highlights: ''
			}
		},
		onLoad(){
			this.getArea()
			this.getList()
			this.getSelect("bright_points_job")
			this.getSelect("bright_recruit")
		},
		//页面滚动到底部的事件
		onReachBottom(){
			let that = this
			if(!that.nodata){
				if(timer != null){
				 clearTimeout(timer);
				}
				timer = setTimeout(function(){
				//加载更多数据
				 that.pageNum ++
				 that.getList();
				}, 1000);
			}
		 },
		onPullDownRefresh() {
			this.pageNum = 1
			this.nodata = false
			this.getList()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getTag(item){
				console.log(item)
				if(item){
					this.highlights = item.dictLabel
				}else{
					this.highlights = ''
				}
				this.getList()
			},
			//联系方式
			showLink(item){
				let that = this
				that.isShow = true
				that.linkForm = item
			},
			//拨打电话
			takePhone(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			//点击复制
			copyBtn(text){
				uni.setClipboardData({
					data: text,
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功！'
						})
					},
					fail() {
						uni.showToast({ //提示
							title: '复制失败！'
						})
					}
				});
			},
			// 预览图片
			clickImg(img,index) {
				wx.previewImage({
					urls: img.split(","), //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: img.split(",")[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			toIndex(){
				uni.switchTab({
					url: '../index/index'
				})
			},
			//获取区域
			getArea(){
				let that = this
				that.$api.request('/api/area/job/list','',{
					
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.areaArray = res.rows
				})
			},
			//获取亮点
			getSelect(type){
				let that = this;
				that.$api.request('/api/dict/data/list','',{
					dictType: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					if(type == 'bright_points_job'){ //求职
						that.tagList = res.rows
					}else if(type == 'bright_recruit'){ //招聘
						that.tagList1 = res.rows
					} 
				})
			},
			//选择区域
			bindChangeArea(e){
				console.log(e)
				this.areaIndex = e.target.value
			},
			bindPickerChange1(e){
				this.index1 = e.target.value
				this.getList()
			},
			getList1(type){
				this.index1 = type
				this.pageNum = 1
				this.highlights = ''
				this.getList()
			},
			//获取列表
			getList(){
				let that = this
				let type
				if(that.index1 == 0){
					type = ''
				}else if(that.index1 == 1){
					type = 0
				}else if(that.index1 == 2){
					type = 1
				}
				let obj = {
					areaCode: '',
					type: type,//0招聘,1求职
					post: that.post,
					highlights: that.highlights,
					pageNum: that.pageNum,
					pageSize: that.pageSize,
				}
				that.$api.request('/api/recruitmentjob/recuitmentJoblist','',obj, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					console.log(res)
					if(that.pageNum == 1){
						that.list=res.rows
					}else{
						res.rows.forEach((item,index) =>{
							that.list.push(item)
						})
					}
					if(res.rows.length == 0){
						that.nodata = true
					}
				})
			},
			toDetail(id){
				uni.navigateTo({
					url: '../jobDetail/jobDetail?id=' + id
				})
			},
			
			bindPickerChange(e){
				this.index = e.target.value
				// this.pageNum = 1
				// if(this.index == 1){
				// 	this.latitude = uni.getStorageSync("latitude")
				// 	this.longitude = uni.getStorageSync("longitude")
				// }else{
				// 	this.latitude = ''
				// 	this.longitude = ''
				// 	this.sortType = ''
				// }
				// this.getList()
			},
			bindPickerChange2(e){
				this.index2 = e.target.value
			},
			toMy(){
				uni.switchTab({
					url: '../my/my'
				})
			},
			toPublish(){
				uni.switchTab({
					url: '../publishType/publishType'
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.content{
		background: #FFFFFF;
		padding-bottom: 50rpx;
		min-height: 100vh;
		.search_box{
			width: 95%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10rpx;
			// border: 1rpx solid #F3F6F8;
			// padding-bottom: 5rpx;
			.search_input{
				width: 330rpx;
				height: 60rpx;
				border: 2rpx solid #007AFF;
				border-radius: 30rpx;
				padding-left: 10rpx;
				margin-right: 10rpx;
				line-height: 60rpx;
			}
			.search_btn{
				// background: #007AFF;
				color: #007AFF;
				border: 1rpx solid #007AFF;
				margin-left: 10rpx;
				padding: 8rpx 10rpx;
				border-radius: 10rpx;
				font-size: 36rpx;
				margin-bottom: 5rpx;
			}
			.selected_btn{
				background: #007AFF;
				color: #FFFFFF;
			}
		}
		
		.posters{
			width: 100vw;
			height: 100%;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 999999;
			.posters_layer{
				background: rgba(0,0,0,0.7);
				width: 100%;
				height: 100%;
				padding-top: 250rpx;
				border-radius: 10rpx;
				.canvas-box{
					width:600rpx;
					height:400rpx;
					margin: 0 auto;
					.canvas-inner{
						width:100%;
						height:100%;
						z-index: 9999;
						background: #FFFFFF;
						border-radius: 10rpx;
						.link_title{
							width: 100%;
							height: 100rpx;
							border-bottom: 1rpx solid #ededed;
							text-align: center;
							line-height: 100rpx;
							margin-bottom: 30rpx;
						}
						.q_link{
							color: #19BE6B;
							width: 90%;
							margin: 0 auto;
							line-height: 60rpx;
							display: flex;
							justify-content: space-between;
							margin-bottom: 20rpx;
							.link_inner_btn{
								width: 130rpx;
								height: 50rpx;
								color: #FFFFFF;
								background: #19BE6B;
								border-radius: 5rpx;
								padding: 5rpx 10rpx;
								line-height: 50rpx;
							}
						}
						.link_btn{
							width: 60%;
							margin: 0 auto;
							margin-top: 30rpx;
							background: #19BE6B;
						}
					}
				}
			}
		}
		.q_footer{
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #FFFFFF;
			border-top: 1rpx solid #C0C0C0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.q_footer_inner{
				width: 33%;
				text-align: center;
				.footer_img{
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin: 0 auto;
				}
				text{
					font-size: 28rpx;
					color: #666666;
					margin-top: 15rpx;
				}
			}
		}
		.add_padding{
			padding-top: 100rpx;
		}
		.q_list{
			width: 96%;
			margin: 0 auto;
			display: flex;
			align-items: flex-start;
			padding-top: 10rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #DDDDDD;
			.q_list_img{
				width: 60rpx;
				height: 60rpx;
				border-radius: 60rpx;
				margin-right: 20rpx;
			}
			.q_list_content{
				width: calc(100% - 90rpx);
				margin-left: 40rpx;
				.q_user{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.q_user_inner{
						display: flex;
						.q_name{
							font-size: 36rpx;
							color: #232A3A;
							margin-right: 20rpx;
							font-weight: bold;
						}
						.q_top{
							color: #E54D42;
							font-size: 28rpx;
							background: #F0D492;
							padding: 5rpx 10rpx;
							border-radius: 5rpx;
						}
					}
					.q_type{
						background: #E83428;
						color: #FFFFFF;
						padding: 2rpx 10rpx;
						border-radius: 10rpx;
					}
					.qiuzhi{
						background: #3388FF;
					}
				}
				.q_tag{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 10rpx 0;
					margin-left: 5rpx;
					border: 1rpx solid #FFFFFF;
					.q_tag_inner{
						color: #3388FF;
						border: 1rpx solid #3388FF;
						font-size: 28rpx;
						margin-right: 20rpx;
						padding: 5rpx 10rpx;
						border-radius: 5rpx;
						margin-left: 5rpx;
					}
				}
				.q_content{
					.q_inner{
						font-size: 36rpx;
						line-height: 50rpx;
						color: #222222;
					}
					.all_btn{
						color: #19BE6B;						
					}
					.q_link{
						color: #19BE6B;
					}
					.take_phone{
						color: #FFFFFF;
						background: #19BE6B;
						padding: 5rpx 15rpx;
						border-radius: 5rpx;
						display: inline-block;
						margin-bottom: 20rpx;
						margin-top: 10rpx;
						font-size: 30rpx;
					}
					.q_img_box{
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						.q_img{
							width: 30%;
							height: 200rpx;
							margin-bottom: 20rpx;
							margin-right: 20rpx;
						}
					}
				}
				.p_bottom{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;
					.p_time{
						color: #C2C2C2;
						font-size: 30rpx;
					}
				}
			}
		}
		.to_index{
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: #3388FF;
			color: #FFFFFF;
			font-size: 28rpx;
			position: fixed;
			right: 0;
			bottom: 150rpx;
			border-radius: 50%;
		}
		.hsort{
			width: 100%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			top: 0;
			left: 0;
			background: #ffffff;
			padding-bottom: 10rpx;
			padding-top: 10rpx;
			height: 80rpx;
			.hsort_inner{
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;
				.hsort_inner_text{
					color: #BFBFC0;
					font-size: 32rpx;
					display: block;
				}
				.hsort_inner_icon{
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
		.tab_type{
			width: 100%;
			height: 60rpx;
			display: flex;
			align-items: center;
			.tabs{
				font-size: 32rpx;
				display: inline-block;
				background: #EFEFEF;
				color: #979797;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			.selected{
				background: #56CC93;
				color: #FFFFFF;
			}
		}
		.tag_list{
			height: 60rpx;
			background: #F8F8F8;
			overflow-x: scroll;
			padding: 20rpx;
			min-width: 100vw;
			position: fixed;
			top: 90rpx;
			.tag_inner{
				font-size: 32rpx;
				display: inline-block;
				background: #EFEFEF;
				color: #979797;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			.selected{
				background: #56CC93;
				color: #FFFFFF;
			}
		}
	}
</style>
